<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>美程广场</title>
    <link rel="stylesheet" href="css/layerdemo.css">
    <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
    <script src="http://jdwx.yunbaite.cn/js/jQuery.js"></script>
    <script src="js/setWidth.js"></script>
    <style>
        /* 最外层盒子相关设置 */

        .container {
            background-image: url(images/bg.png) !important;
        }

        /* 最外层盒子相关设置 */

        #lottery {
            border-color: #0b8ed6 !important;
            background-color: #0b8ed6 !important;
        }

        .lotteryBox {
            border-color: #004358 !important;
            background-color: #004358 !important;
        }

        /* 奖品对应的每个框 */

        .lotteryBox ul li {
            border-color: #004358 !important;
            background-color: #ffaa02 !important;
        }

        /* 奖品内容框 */

        .itembox {
            border-color: #ffaa02 !important;
            color: #574000 !important;
        }

        /* 中间点击抽奖按钮框 */

        .lotteryBox ul li a {
            background-color: #ffd21e !important;
        }

        .lottery-unit-a {
            border-color: #ffd21e !important;
        }

        /* 中间点击按钮文字框 */

        .lotteryClick {
            border-color: #ffd21e !important;
            background-color: #fff55c !important;
            color: #574000 !important;
        }

        /* 蒙层 样式自己设置可设边框、背景颜色、背景图片，不需要加权重*/

        .mask {
            border: 5px solid #ff0000;
        }

        /* 我的奖品文字 */

        .prizeTxt {
            background-color: #0075cf !important;
            color: #fff !important;
        }

        /* 抽奖规则 */

        .ruleBox {
            color: #fff !important;
        }

        /* 抽奖次数弹窗 */

        .numberBox {
            background-color: #004982 !important;
            border-color: #ffdd41 !important;
            color: #fff !important;
        }

        .numbtn {
            background-color: #ffdd41 !important;
            color: #6b3d02 !important;
        }

        /* 获奖弹窗样式 */

        .contentBox {
            background-image: url(images/dialogbg.png) !important;
            color: #fff !important;
            border-color: #ffdd41 !important;
        }

        /* 获奖产品图片边框 */

        .prizeImg {
            border-color: #fff !important;
        }

        .prizeBtn {
            background-color: #ffdd41 !important;
            color: #6b3d02 !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 九宫格 -->
        <div id="lottery">
            <div class="lotteryBox">
                <ul>
                    <li class="lottery-unit lottery-unit-0">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>200元现金红包包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-1">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>300元现金红包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-2">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>幸运礼包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-7">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>洁柔便携式旅行装小包纸</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit-a bg_c_f2c700">
                        <a href="#">
                            <div class="lotteryClick">立即抽奖</div>
                        </a>
                    </li>
                    <li class="lottery-unit lottery-unit-3">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>幸运礼包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-6">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>幸运礼包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-5">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>幸运礼包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                    <li class="lottery-unit lottery-unit-4">
                        <div class="itembox">
                            <div class="img">
                                <img src="images/prize_test.png">
                            </div>
                            <span>幸运礼包</span>
                        </div>
                        <div class="mask"></div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 我的奖品 -->
        <div class="myPrize">
            <div class="prizeTxt">
                我的奖品 >
            </div>
        </div>
        <!-- 抽奖规则 -->
        <div class="ruleBox">
            <div class="ruleTitle">抽奖规则</div>
            <div class="ruleInfo">
                <p>1.每个手机号，每天可参与抽奖1次；</p>
                <p>2.每个手机号单词活动仅有一次中奖机会；</p>
                <p>3.中奖后需凭中奖信息，前去美程广场一楼客服台领取；</p>
                <p>4.本活动最终解释权归青白江美城广场所有。</p>
            </div>
        </div>
        <!-- 今日次数已用完 -->
        <div class="prizeNumber">
            <div class="finishbox">
                <div class="numberBox">今日次数已用完，明天继续哟!</div>
                <button class="numbtn" onclick="closeFinishDialog()">好的</button>
            </div>
        </div>
        <!-- 领取奖励 -->
        <div class="acceptPrize">
            <div class="prizedialog">
                <div class="contentBox">
                    <p>恭喜你获得XXXXX，凭获奖信息前去服务台领取！</p>
                    <div class="prizeImg">
                        <img src="images/prize_test.png" alt="">
                    </div>
                </div>
                <button class="prizeBtn" onclick="closePrizeDialog()">好的</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        setWidth(750);
        var lottery = {
            index: -1,    //当前转动到哪个位置，起点位置
            count: 0,    //总共有多少个位置
            timer: 0,    //setTimeout的ID，用clearTimeout清除
            speed: 20,    //初始转动速度
            times: 0,    //转动次数
            cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,    //中奖位置
            prizeNum: 0,
            init: function (id) {
                if ($("#" + id).find(".lottery-unit").length > 0) {
                    $lottery = $("#" + id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-" + this.index).addClass("active");
                }
            },
            roll: function (prizeIndex) {
                this.prize = prizeIndex;
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-" + index).removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                $(lottery).find(".lottery-unit-" + this.prize).addClass("active");
                return false;
            }
        };
        function roll(prizeIndex) {
            lottery.times += 1;
            lottery.roll(prizeIndex);
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer);
                if (lottery.prizeNum == 1) {
                    // 获得奖品提醒
                    $(".acceptPrize").css("display", "block");
                } else {
                    // 抽奖次数已用完提醒
                    $(".prizeNumber").css("display", "block");
                }
                lottery.times = 0;
                click = false;
            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 10;
                } else if (lottery.times == lottery.cycle) {
                    var index = Math.random() * (lottery.count) | 0;
                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                };
                lottery.timer = setTimeout(function () { roll(prizeIndex) }, lottery.speed);//循环调用
            }
            return false;
        };
        var click = false;
        window.onload = function () {
            lottery.init("lottery");
            $("#lottery a").click(function () {
                if (click) {
                    return false;
                } else {
                    lottery.prizeNum += 1;
                    lottery.speed = 100;
                    roll(7);
                    click = true;
                    return false;
                }
            });

        };
        // 抽奖次数
        function closeFinishDialog() {
            $(".prizeNumber").css("display", "none");
        }
        // 获得奖品
        function closePrizeDialog() {
            $(".acceptPrize").css("display", "none");
        }
    </script>
</body>

</html>